import React, { useEffect, useRef, useState, useCallback } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three-stdlib';
import { Spin, Tabs, Table, Progress, Statistic, Row, Col, Card, Space, Modal, Descriptions, Tag } from 'antd';
import { 
  EyeOutlined,
  DatabaseOutlined,
  HomeOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import './dashboard3d.css';
import Phase1View from './Phase1View';
import Phase2View from './Phase2View';

// 移除TabPane的解构，使用新的items语法

// 电梯信息接口
interface ElevatorData {
  id: string;
  position: { x: number; y: number; z: number }; // 相对于楼宇的位置
  type: 'passenger' | 'freight' | 'emergency';
  status: 'normal' | 'maintenance' | 'error';
  floors: number[]; // 服务楼层
}

// 设备信息接口
interface DeviceData {
  id: string;
  name: string;
  type: 'elevator' | 'hvac' | 'security' | 'lighting' | 'fire_safety' | 'access_control';
  buildingId: string;
  buildingName: string;
  status: 'online' | 'offline' | 'maintenance' | 'error';
  location: string;
  lastMaintenance: string;
  nextMaintenance: string;
  manufacturer: string;
  model: string;
  installDate: string;
  energyConsumption?: number; // kWh
  operatingHours?: number;
}

// 楼宇数据接口
interface BuildingData {
  id: string;
  name: string;
  position: { x: number; y: number; z: number };
  floors: number;
  type: 'residential' | 'commercial' | 'office' | 'mixed';
  status: 'normal' | 'medium' | 'low';
  occupancy: number; // 入住率 0-100
  elevators: ElevatorData[]; // 电梯信息
}

// 模拟楼宇数据
const mockBuildingsData: BuildingData[] = [
  {
    id: '1',
    name: '华发新城A座',
    position: { x: -50, y: 0, z: -30 },
    floors: 32,
    type: 'residential',
    status: 'normal',
    occupancy: 85,
    elevators: [
      { id: 'A1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 32}, (_, i) => i + 1) },
      { id: 'A2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 32}, (_, i) => i + 1) }
    ]
  },
  {
    id: '2',
    name: '华发新城B座',
    position: { x: -20, y: 0, z: -30 },
    floors: 28,
    type: 'residential',
    status: 'normal',
    occupancy: 92,
    elevators: [
      { id: 'B1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 28}, (_, i) => i + 1) },
      { id: 'B2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'maintenance', floors: Array.from({length: 28}, (_, i) => i + 1) }
    ]
  },
  {
    id: '3',
    name: '华发新城C座',
    position: { x: 10, y: 0, z: -30 },
    floors: 35,
    type: 'residential',
    status: 'medium',
    occupancy: 78,
    elevators: [
      { id: 'C1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 35}, (_, i) => i + 1) },
      { id: 'C2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'error', floors: Array.from({length: 35}, (_, i) => i + 1) },
      { id: 'C3', position: { x: 0, y: 0, z: 3 }, type: 'freight', status: 'normal', floors: [1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35] }
    ]
  },
  {
    id: '4',
    name: '商业中心',
    position: { x: 40, y: 0, z: -10 },
    floors: 15,
    type: 'commercial',
    status: 'normal',
    occupancy: 95,
    elevators: [
      { id: 'D1', position: { x: -3, y: 0, z: 0 }, type: 'passenger', status: 'normal', floors: Array.from({length: 15}, (_, i) => i + 1) },
      { id: 'D2', position: { x: 3, y: 0, z: 0 }, type: 'passenger', status: 'normal', floors: Array.from({length: 15}, (_, i) => i + 1) },
      { id: 'D3', position: { x: 0, y: 0, z: 3 }, type: 'freight', status: 'normal', floors: [1, 2, 5, 10, 15] },
      { id: 'D4', position: { x: 0, y: 0, z: -3 }, type: 'emergency', status: 'normal', floors: Array.from({length: 15}, (_, i) => i + 1) }
    ]
  },
  {
    id: '5',
    name: '办公大楼',
    position: { x: -30, y: 0, z: 20 },
    floors: 25,
    type: 'office',
    status: 'normal',
    occupancy: 88,
    elevators: [
      { id: 'E1', position: { x: -2, y: 0, z: -2 }, type: 'passenger', status: 'normal', floors: Array.from({length: 25}, (_, i) => i + 1) },
      { id: 'E2', position: { x: 2, y: 0, z: -2 }, type: 'passenger', status: 'normal', floors: Array.from({length: 25}, (_, i) => i + 1) },
      { id: 'E3', position: { x: 0, y: 0, z: 2 }, type: 'freight', status: 'maintenance', floors: [1, 5, 10, 15, 20, 25] }
    ]
  },
  {
    id: '6',
    name: '综合体D座',
    position: { x: 20, y: 0, z: 30 },
    floors: 40,
    type: 'mixed',
    status: 'low',
    occupancy: 65,
    elevators: [
      { id: 'F1', position: { x: -3.5, y: 0, z: -3.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 40}, (_, i) => i + 1) },
      { id: 'F2', position: { x: 3.5, y: 0, z: -3.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 40}, (_, i) => i + 1) },
      { id: 'F3', position: { x: -3.5, y: 0, z: 3.5 }, type: 'passenger', status: 'error', floors: Array.from({length: 40}, (_, i) => i + 1) },
      { id: 'F4', position: { x: 3.5, y: 0, z: 3.5 }, type: 'freight', status: 'normal', floors: [1, 2, 5, 10, 15, 20, 25, 30, 35, 40] },
      { id: 'F5', position: { x: 0, y: 0, z: 0 }, type: 'emergency', status: 'normal', floors: Array.from({length: 40}, (_, i) => i + 1) }
    ]
  }
];

// 模拟设备数据
const mockDevicesData: DeviceData[] = [
  // 住宅小区A设备
  { id: 'DEV001', name: '电梯A1', type: 'elevator', buildingId: '1', buildingName: '住宅小区A', status: 'online', location: '1号楼东侧', lastMaintenance: '2024-01-15', nextMaintenance: '2024-04-15', manufacturer: '奥的斯', model: 'Gen2-MR', installDate: '2020-03-10', operatingHours: 8760 },
  { id: 'DEV002', name: '电梯A2', type: 'elevator', buildingId: '1', buildingName: '住宅小区A', status: 'online', location: '1号楼西侧', lastMaintenance: '2024-01-15', nextMaintenance: '2024-04-15', manufacturer: '奥的斯', model: 'Gen2-MR', installDate: '2020-03-10', operatingHours: 8650 },
  { id: 'DEV003', name: '中央空调系统', type: 'hvac', buildingId: '1', buildingName: '住宅小区A', status: 'online', location: '地下室机房', lastMaintenance: '2024-02-01', nextMaintenance: '2024-05-01', manufacturer: '大金', model: 'VRV-X7', installDate: '2020-02-15', energyConsumption: 1250 },
  { id: 'DEV004', name: '门禁系统', type: 'access_control', buildingId: '1', buildingName: '住宅小区A', status: 'online', location: '大堂入口', lastMaintenance: '2024-01-20', nextMaintenance: '2024-07-20', manufacturer: '海康威视', model: 'DS-K1T671TM-3XF', installDate: '2020-04-01' },
  
  // 商业综合体设备
  { id: 'DEV005', name: '客梯B1', type: 'elevator', buildingId: '2', buildingName: '商业综合体', status: 'maintenance', location: 'B区1号梯', lastMaintenance: '2024-02-10', nextMaintenance: '2024-05-10', manufacturer: '三菱', model: 'NEXIEZ-MRL', installDate: '2019-08-20', operatingHours: 12500 },
  { id: 'DEV006', name: '货梯B2', type: 'elevator', buildingId: '2', buildingName: '商业综合体', status: 'online', location: 'B区货梯', lastMaintenance: '2024-01-25', nextMaintenance: '2024-04-25', manufacturer: '三菱', model: 'ELENESSA', installDate: '2019-08-20', operatingHours: 9800 },
  { id: 'DEV007', name: '消防系统', type: 'fire_safety', buildingId: '2', buildingName: '商业综合体', status: 'online', location: '各楼层', lastMaintenance: '2024-02-15', nextMaintenance: '2024-08-15', manufacturer: '海湾', model: 'GST-LD-8318', installDate: '2019-07-10' },
  { id: 'DEV008', name: '智能照明', type: 'lighting', buildingId: '2', buildingName: '商业综合体', status: 'online', location: '公共区域', lastMaintenance: '2024-01-30', nextMaintenance: '2024-07-30', manufacturer: '飞利浦', model: 'CityTouch flex', installDate: '2019-09-05', energyConsumption: 850 },
  
  // 高层公寓设备
  { id: 'DEV009', name: '高速电梯C1', type: 'elevator', buildingId: '3', buildingName: '高层公寓', status: 'online', location: '东塔1号梯', lastMaintenance: '2024-02-05', nextMaintenance: '2024-05-05', manufacturer: '日立', model: 'NEXWAY', installDate: '2021-05-15', operatingHours: 6200 },
  { id: 'DEV010', name: '高速电梯C2', type: 'elevator', buildingId: '3', buildingName: '高层公寓', status: 'error', location: '东塔2号梯', lastMaintenance: '2024-01-10', nextMaintenance: '2024-04-10', manufacturer: '日立', model: 'NEXWAY', installDate: '2021-05-15', operatingHours: 6150 },
  { id: 'DEV011', name: '安防监控', type: 'security', buildingId: '3', buildingName: '高层公寓', status: 'online', location: '全楼监控', lastMaintenance: '2024-02-20', nextMaintenance: '2024-08-20', manufacturer: '大华', model: 'DH-IPC-HFW4433M-I2', installDate: '2021-04-20' },
  
  // 商业中心设备
  { id: 'DEV012', name: '客梯D1', type: 'elevator', buildingId: '4', buildingName: '商业中心', status: 'online', location: '西区1号梯', lastMaintenance: '2024-02-12', nextMaintenance: '2024-05-12', manufacturer: '蒂森克虏伯', model: 'synergy', installDate: '2018-11-10', operatingHours: 15600 },
  { id: 'DEV013', name: '客梯D2', type: 'elevator', buildingId: '4', buildingName: '商业中心', status: 'online', location: '西区2号梯', lastMaintenance: '2024-02-12', nextMaintenance: '2024-05-12', manufacturer: '蒂森克虏伯', model: 'synergy', installDate: '2018-11-10', operatingHours: 15450 },
  { id: 'DEV014', name: '中央空调', type: 'hvac', buildingId: '4', buildingName: '商业中心', status: 'online', location: '屋顶机房', lastMaintenance: '2024-01-28', nextMaintenance: '2024-04-28', manufacturer: '约克', model: 'YVWA', installDate: '2018-10-05', energyConsumption: 2100 },
  
  // 办公大楼设备
  { id: 'DEV015', name: '高速电梯E1', type: 'elevator', buildingId: '5', buildingName: '办公大楼', status: 'online', location: 'A座1号梯', lastMaintenance: '2024-02-08', nextMaintenance: '2024-05-08', manufacturer: '迅达', model: '7000', installDate: '2022-01-20', operatingHours: 4800 },
  { id: 'DEV016', name: '高速电梯E2', type: 'elevator', buildingId: '5', buildingName: '办公大楼', status: 'online', location: 'A座2号梯', lastMaintenance: '2024-02-08', nextMaintenance: '2024-05-08', manufacturer: '迅达', model: '7000', installDate: '2022-01-20', operatingHours: 4750 },
  { id: 'DEV017', name: 'BMS系统', type: 'hvac', buildingId: '5', buildingName: '办公大楼', status: 'online', location: '智能控制中心', lastMaintenance: '2024-02-18', nextMaintenance: '2024-08-18', manufacturer: '西门子', model: 'Desigo CC', installDate: '2022-02-10', energyConsumption: 1800 },
  
  // 综合大厦设备
  { id: 'DEV018', name: '超高速电梯F1', type: 'elevator', buildingId: '6', buildingName: '综合大厦', status: 'online', location: '核心筒1号梯', lastMaintenance: '2024-02-22', nextMaintenance: '2024-05-22', manufacturer: '东芝', model: 'SPACEL-GR', installDate: '2023-03-15', operatingHours: 2200 },
  { id: 'DEV019', name: '超高速电梯F2', type: 'elevator', buildingId: '6', buildingName: '综合大厦', status: 'online', location: '核心筒2号梯', lastMaintenance: '2024-02-22', nextMaintenance: '2024-05-22', manufacturer: '东芝', model: 'SPACEL-GR', installDate: '2023-03-15', operatingHours: 2150 },
  { id: 'DEV020', name: '货梯F4', type: 'elevator', buildingId: '6', buildingName: '综合大厦', status: 'online', location: '货运专用梯', lastMaintenance: '2024-02-25', nextMaintenance: '2024-05-25', manufacturer: '东芝', model: 'ELCOSMO', installDate: '2023-03-20', operatingHours: 1800 },
  { id: 'DEV021', name: '智能楼宇系统', type: 'hvac', buildingId: '6', buildingName: '综合大厦', status: 'online', location: '智控中心', lastMaintenance: '2024-03-01', nextMaintenance: '2024-09-01', manufacturer: '霍尼韦尔', model: 'EBI R200', installDate: '2023-04-01', energyConsumption: 2800 },
];

// 华发二期楼宇数据
const mockBuildingsDataPhase2: BuildingData[] = [
  // 4栋办公楼 - 排列在前排
  {
    id: 'P2-O1',
    name: '华发二期办公楼A座',
    position: { x: -60, y: 0, z: -80 },
    floors: 28,
    type: 'office',
    status: 'normal',
    occupancy: 92,
    elevators: [
      { id: 'P2-O1-E1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 28}, (_, i) => i + 1) },
      { id: 'P2-O1-E2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 28}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-O2',
    name: '华发二期办公楼B座',
    position: { x: -20, y: 0, z: -80 },
    floors: 30,
    type: 'office',
    status: 'normal',
    occupancy: 88,
    elevators: [
      { id: 'P2-O2-E1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 30}, (_, i) => i + 1) },
      { id: 'P2-O2-E2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'maintenance', floors: Array.from({length: 30}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-O3',
    name: '华发二期办公楼C座',
    position: { x: 20, y: 0, z: -80 },
    floors: 26,
    type: 'office',
    status: 'medium',
    occupancy: 85,
    elevators: [
      { id: 'P2-O3-E1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 26}, (_, i) => i + 1) },
      { id: 'P2-O3-E2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 26}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-O4',
    name: '华发二期办公楼D座',
    position: { x: 60, y: 0, z: -80 },
    floors: 32,
    type: 'office',
    status: 'normal',
    occupancy: 90,
    elevators: [
      { id: 'P2-O4-E1', position: { x: -3, y: 0, z: -3 }, type: 'passenger', status: 'normal', floors: Array.from({length: 32}, (_, i) => i + 1) },
      { id: 'P2-O4-E2', position: { x: 3, y: 0, z: -3 }, type: 'passenger', status: 'error', floors: Array.from({length: 32}, (_, i) => i + 1) }
    ]
  },
  // 8栋住宅楼 - 排列在后两排
  {
    id: 'P2-R1',
    name: '华发二期住宅楼1号楼',
    position: { x: -80, y: 0, z: -40 },
    floors: 33,
    type: 'residential',
    status: 'normal',
    occupancy: 95,
    elevators: [
      { id: 'P2-R1-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 33}, (_, i) => i + 1) },
      { id: 'P2-R1-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 33}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R2',
    name: '华发二期住宅楼2号楼',
    position: { x: -50, y: 0, z: -40 },
    floors: 35,
    type: 'residential',
    status: 'normal',
    occupancy: 88,
    elevators: [
      { id: 'P2-R2-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 35}, (_, i) => i + 1) },
      { id: 'P2-R2-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'maintenance', floors: Array.from({length: 35}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R3',
    name: '华发二期住宅楼3号楼',
    position: { x: -20, y: 0, z: -40 },
    floors: 30,
    type: 'residential',
    status: 'medium',
    occupancy: 82,
    elevators: [
      { id: 'P2-R3-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 30}, (_, i) => i + 1) },
      { id: 'P2-R3-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 30}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R4',
    name: '华发二期住宅楼4号楼',
    position: { x: 10, y: 0, z: -40 },
    floors: 32,
    type: 'residential',
    status: 'normal',
    occupancy: 91,
    elevators: [
      { id: 'P2-R4-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 32}, (_, i) => i + 1) },
      { id: 'P2-R4-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 32}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R5',
    name: '华发二期住宅楼5号楼',
    position: { x: -60, y: 0, z: 0 },
    floors: 28,
    type: 'residential',
    status: 'normal',
    occupancy: 87,
    elevators: [
      { id: 'P2-R5-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 28}, (_, i) => i + 1) },
      { id: 'P2-R5-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'error', floors: Array.from({length: 28}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R6',
    name: '华发二期住宅楼6号楼',
    position: { x: -30, y: 0, z: 0 },
    floors: 31,
    type: 'residential',
    status: 'normal',
    occupancy: 93,
    elevators: [
      { id: 'P2-R6-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 31}, (_, i) => i + 1) },
      { id: 'P2-R6-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 31}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R7',
    name: '华发二期住宅楼7号楼',
    position: { x: 0, y: 0, z: 0 },
    floors: 29,
    type: 'residential',
    status: 'low',
    occupancy: 76,
    elevators: [
      { id: 'P2-R7-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'maintenance', floors: Array.from({length: 29}, (_, i) => i + 1) },
      { id: 'P2-R7-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 29}, (_, i) => i + 1) }
    ]
  },
  {
    id: 'P2-R8',
    name: '华发二期住宅楼8号楼',
    position: { x: 30, y: 0, z: 0 },
    floors: 34,
    type: 'residential',
    status: 'normal',
    occupancy: 89,
    elevators: [
      { id: 'P2-R8-E1', position: { x: -2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 34}, (_, i) => i + 1) },
      { id: 'P2-R8-E2', position: { x: 2.5, y: 0, z: -2.5 }, type: 'passenger', status: 'normal', floors: Array.from({length: 34}, (_, i) => i + 1) }
    ]
  }
];

// 华发二期设备数据
const mockDevicesDataPhase2: DeviceData[] = [
  // 办公楼A座设备
  { id: 'P2-DEV001', name: '电梯P2-O1-E1', type: 'elevator', buildingId: 'P2-O1', buildingName: '华发二期办公楼A座', status: 'online', location: 'A座1号梯', lastMaintenance: '2024-02-15', nextMaintenance: '2024-05-15', manufacturer: '奥的斯', model: 'Gen2-Premier', installDate: '2023-06-10', operatingHours: 2800 },
  { id: 'P2-DEV002', name: '电梯P2-O1-E2', type: 'elevator', buildingId: 'P2-O1', buildingName: '华发二期办公楼A座', status: 'online', location: 'A座2号梯', lastMaintenance: '2024-02-15', nextMaintenance: '2024-05-15', manufacturer: '奥的斯', model: 'Gen2-Premier', installDate: '2023-06-10', operatingHours: 2750 },
  
  // 办公楼B座设备
  { id: 'P2-DEV003', name: '电梯P2-O2-E1', type: 'elevator', buildingId: 'P2-O2', buildingName: '华发二期办公楼B座', status: 'online', location: 'B座1号梯', lastMaintenance: '2024-02-20', nextMaintenance: '2024-05-20', manufacturer: '三菱', model: 'NEXIEZ-GPX', installDate: '2023-07-15', operatingHours: 2650 },
  { id: 'P2-DEV004', name: '电梯P2-O2-E2', type: 'elevator', buildingId: 'P2-O2', buildingName: '华发二期办公楼B座', status: 'maintenance', location: 'B座2号梯', lastMaintenance: '2024-03-01', nextMaintenance: '2024-06-01', manufacturer: '三菱', model: 'NEXIEZ-GPX', installDate: '2023-07-15', operatingHours: 2600 },
  
  // 办公楼C座设备
  { id: 'P2-DEV005', name: '电梯P2-O3-E1', type: 'elevator', buildingId: 'P2-O3', buildingName: '华发二期办公楼C座', status: 'online', location: 'C座1号梯', lastMaintenance: '2024-02-25', nextMaintenance: '2024-05-25', manufacturer: '日立', model: 'NEXWAY-S', installDate: '2023-08-01', operatingHours: 2500 },
  { id: 'P2-DEV006', name: '电梯P2-O3-E2', type: 'elevator', buildingId: 'P2-O3', buildingName: '华发二期办公楼C座', status: 'online', location: 'C座2号梯', lastMaintenance: '2024-02-25', nextMaintenance: '2024-05-25', manufacturer: '日立', model: 'NEXWAY-S', installDate: '2023-08-01', operatingHours: 2480 },
  
  // 办公楼D座设备
  { id: 'P2-DEV007', name: '电梯P2-O4-E1', type: 'elevator', buildingId: 'P2-O4', buildingName: '华发二期办公楼D座', status: 'online', location: 'D座1号梯', lastMaintenance: '2024-03-05', nextMaintenance: '2024-06-05', manufacturer: '迅达', model: '7000-MRL', installDate: '2023-08-20', operatingHours: 2400 },
  { id: 'P2-DEV008', name: '电梯P2-O4-E2', type: 'elevator', buildingId: 'P2-O4', buildingName: '华发二期办公楼D座', status: 'error', location: 'D座2号梯', lastMaintenance: '2024-01-15', nextMaintenance: '2024-04-15', manufacturer: '迅达', model: '7000-MRL', installDate: '2023-08-20', operatingHours: 2350 },
  
  // 住宅楼1号楼设备
  { id: 'P2-DEV009', name: '电梯P2-R1-E1', type: 'elevator', buildingId: 'P2-R1', buildingName: '华发二期住宅楼1号楼', status: 'online', location: '1号楼东梯', lastMaintenance: '2024-02-10', nextMaintenance: '2024-05-10', manufacturer: '蒂森克虏伯', model: 'synergy-200', installDate: '2023-09-01', operatingHours: 2200 },
  { id: 'P2-DEV010', name: '电梯P2-R1-E2', type: 'elevator', buildingId: 'P2-R1', buildingName: '华发二期住宅楼1号楼', status: 'online', location: '1号楼西梯', lastMaintenance: '2024-02-10', nextMaintenance: '2024-05-10', manufacturer: '蒂森克虏伯', model: 'synergy-200', installDate: '2023-09-01', operatingHours: 2180 },
  
  // 住宅楼2号楼设备
  { id: 'P2-DEV011', name: '电梯P2-R2-E1', type: 'elevator', buildingId: 'P2-R2', buildingName: '华发二期住宅楼2号楼', status: 'online', location: '2号楼东梯', lastMaintenance: '2024-02-18', nextMaintenance: '2024-05-18', manufacturer: '东芝', model: 'SPACEL-α', installDate: '2023-09-15', operatingHours: 2100 },
  { id: 'P2-DEV012', name: '电梯P2-R2-E2', type: 'elevator', buildingId: 'P2-R2', buildingName: '华发二期住宅楼2号楼', status: 'maintenance', location: '2号楼西梯', lastMaintenance: '2024-03-01', nextMaintenance: '2024-06-01', manufacturer: '东芝', model: 'SPACEL-α', installDate: '2023-09-15', operatingHours: 2050 },
  
  // 住宅楼3号楼设备
  { id: 'P2-DEV013', name: '电梯P2-R3-E1', type: 'elevator', buildingId: 'P2-R3', buildingName: '华发二期住宅楼3号楼', status: 'online', location: '3号楼东梯', lastMaintenance: '2024-02-22', nextMaintenance: '2024-05-22', manufacturer: '康力', model: 'KLK3000', installDate: '2023-10-01', operatingHours: 2000 },
  { id: 'P2-DEV014', name: '电梯P2-R3-E2', type: 'elevator', buildingId: 'P2-R3', buildingName: '华发二期住宅楼3号楼', status: 'online', location: '3号楼西梯', lastMaintenance: '2024-02-22', nextMaintenance: '2024-05-22', manufacturer: '康力', model: 'KLK3000', installDate: '2023-10-01', operatingHours: 1980 },
  
  // 住宅楼4号楼设备
  { id: 'P2-DEV015', name: '电梯P2-R4-E1', type: 'elevator', buildingId: 'P2-R4', buildingName: '华发二期住宅楼4号楼', status: 'online', location: '4号楼东梯', lastMaintenance: '2024-03-01', nextMaintenance: '2024-06-01', manufacturer: '西子奥的斯', model: 'TOEC-MRL', installDate: '2023-10-15', operatingHours: 1900 },
  { id: 'P2-DEV016', name: '电梯P2-R4-E2', type: 'elevator', buildingId: 'P2-R4', buildingName: '华发二期住宅楼4号楼', status: 'online', location: '4号楼西梯', lastMaintenance: '2024-03-01', nextMaintenance: '2024-06-01', manufacturer: '西子奥的斯', model: 'TOEC-MRL', installDate: '2023-10-15', operatingHours: 1880 },
  
  // 住宅楼5号楼设备
  { id: 'P2-DEV017', name: '电梯P2-R5-E1', type: 'elevator', buildingId: 'P2-R5', buildingName: '华发二期住宅楼5号楼', status: 'online', location: '5号楼东梯', lastMaintenance: '2024-02-28', nextMaintenance: '2024-05-28', manufacturer: '通力', model: 'MonoSpace-700', installDate: '2023-11-01', operatingHours: 1800 },
  { id: 'P2-DEV018', name: '电梯P2-R5-E2', type: 'elevator', buildingId: 'P2-R5', buildingName: '华发二期住宅楼5号楼', status: 'error', location: '5号楼西梯', lastMaintenance: '2024-01-20', nextMaintenance: '2024-04-20', manufacturer: '通力', model: 'MonoSpace-700', installDate: '2023-11-01', operatingHours: 1750 },
  
  // 住宅楼6号楼设备
  { id: 'P2-DEV019', name: '电梯P2-R6-E1', type: 'elevator', buildingId: 'P2-R6', buildingName: '华发二期住宅楼6号楼', status: 'online', location: '6号楼东梯', lastMaintenance: '2024-03-05', nextMaintenance: '2024-06-05', manufacturer: '富士达', model: 'ZEPHYR', installDate: '2023-11-15', operatingHours: 1700 },
  { id: 'P2-DEV020', name: '电梯P2-R6-E2', type: 'elevator', buildingId: 'P2-R6', buildingName: '华发二期住宅楼6号楼', status: 'online', location: '6号楼西梯', lastMaintenance: '2024-03-05', nextMaintenance: '2024-06-05', manufacturer: '富士达', model: 'ZEPHYR', installDate: '2023-11-15', operatingHours: 1680 },
  
  // 住宅楼7号楼设备
  { id: 'P2-DEV021', name: '电梯P2-R7-E1', type: 'elevator', buildingId: 'P2-R7', buildingName: '华发二期住宅楼7号楼', status: 'maintenance', location: '7号楼东梯', lastMaintenance: '2024-03-10', nextMaintenance: '2024-06-10', manufacturer: '永大', model: 'YD-MRL', installDate: '2023-12-01', operatingHours: 1600 },
  { id: 'P2-DEV022', name: '电梯P2-R7-E2', type: 'elevator', buildingId: 'P2-R7', buildingName: '华发二期住宅楼7号楼', status: 'online', location: '7号楼西梯', lastMaintenance: '2024-03-10', nextMaintenance: '2024-06-10', manufacturer: '永大', model: 'YD-MRL', installDate: '2023-12-01', operatingHours: 1580 },
  
  // 住宅楼8号楼设备
  { id: 'P2-DEV023', name: '电梯P2-R8-E1', type: 'elevator', buildingId: 'P2-R8', buildingName: '华发二期住宅楼8号楼', status: 'online', location: '8号楼东梯', lastMaintenance: '2024-03-12', nextMaintenance: '2024-06-12', manufacturer: '申龙', model: 'SL-2000', installDate: '2023-12-15', operatingHours: 1500 },
  { id: 'P2-DEV024', name: '电梯P2-R8-E2', type: 'elevator', buildingId: 'P2-R8', buildingName: '华发二期住宅楼8号楼', status: 'online', location: '8号楼西梯', lastMaintenance: '2024-03-12', nextMaintenance: '2024-06-12', manufacturer: '申龙', model: 'SL-2000', installDate: '2023-12-15', operatingHours: 1480 }
];

// 3D场景组件
const Scene3DView: React.FC<{ buildingsData: BuildingData[]; isActive?: boolean }> = ({ buildingsData, isActive = true }) => {
  const mountRef = useRef<HTMLDivElement>(null);
  const sceneRef = useRef<THREE.Scene | null>(null);
  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
  const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
  const controlsRef = useRef<OrbitControls | null>(null);
  const animationIdRef = useRef<number | undefined>(undefined);
  const startLoopRef = useRef<(() => void) | null>(null);
  
  const [isLoading, setIsLoading] = useState(true);
  const [selectedDevice, setSelectedDevice] = useState<DeviceData | null>(null);
  const [deviceModalVisible, setDeviceModalVisible] = useState(false);
  const [selectedBuilding, setSelectedBuilding] = useState<BuildingData | null>(null);
  const [buildingModalVisible, setBuildingModalVisible] = useState(false);

  // 获取楼宇颜色
  const getBuildingColor = useCallback((building: BuildingData): number => {
    switch (building.status) {
      case 'normal': return 0x4CAF50; // 绿色
      case 'medium': return 0xFF9800; // 橙色
      case 'low': return 0xF44336; // 红色
      default: return 0x9E9E9E; // 灰色
    }
  }, []); // 没有依赖项因为不依赖任何外部变量

  // 获取楼宇类型颜色
  const getBuildingTypeColor = useCallback((type: string): number => {
    switch (type) {
      case 'residential': return 0x2196F3; // 蓝色
      case 'commercial': return 0x9C27B0; // 紫色
      case 'office': return 0x607D8B; // 蓝灰色
      case 'mixed': return 0x795548; // 棕色
      default: return 0x9E9E9E;
    }
  }, []); // 没有依赖项因为不依赖任何外部变量

  // 获取电梯颜色
  const getElevatorColor = useCallback((elevator: ElevatorData): number => {
    switch (elevator.status) {
      case 'normal': return 0x00FF00; // 绿色
      case 'maintenance': return 0xFFFF00; // 黄色
      case 'error': return 0xFF0000; // 红色
      default: return 0x808080;
    }
  }, []); // 没有依赖项因为不依赖任何外部变量

  // 获取电梯类型颜色
  const getElevatorTypeColor = useCallback((type: string): number => {
    switch (type) {
      case 'passenger': return 0x4169E1; // 皇家蓝
      case 'freight': return 0x8B4513; // 棕色
      case 'emergency': return 0xFF4500; // 橙红色
      default: return 0x808080;
    }
  }, []); // 没有依赖项因为不依赖任何外部变量

  // 创建电梯3D模型
  const createElevator = useCallback((elevator: ElevatorData, buildingHeight: number): THREE.Group => {
    const elevatorGroup = new THREE.Group();
    
    // 电梯井道
    const shaftGeometry = new THREE.BoxGeometry(1.5, buildingHeight, 1.5);
    const shaftMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x333333,
      transparent: true,
      opacity: 0.7
    });
    const shaftMesh = new THREE.Mesh(shaftGeometry, shaftMaterial);
    shaftMesh.position.y = buildingHeight / 2;
    
    // 电梯井道边框
    const shaftEdges = new THREE.EdgesGeometry(shaftGeometry);
    const shaftLineMaterial = new THREE.LineBasicMaterial({ 
      color: getElevatorTypeColor(elevator.type),
      linewidth: 3
    });
    const shaftWireframe = new THREE.LineSegments(shaftEdges, shaftLineMaterial);
    shaftWireframe.position.y = buildingHeight / 2;
    
    // 电梯轿厢（动态位置）
    const carGeometry = new THREE.BoxGeometry(1.2, 2.5, 1.2);
    const carMaterial = new THREE.MeshLambertMaterial({ 
      color: getElevatorTypeColor(elevator.type),
      transparent: true,
      opacity: 0.9
    });
    const carMesh = new THREE.Mesh(carGeometry, carMaterial);
    // 轿厢在不同楼层间移动（简单动画效果）
    const randomFloor = Math.floor(Math.random() * elevator.floors.length) + 1;
    carMesh.position.y = randomFloor * 3;
    
    // 电梯门
    const doorGeometry = new THREE.PlaneGeometry(1.0, 2.0);
    const doorMaterial = new THREE.MeshLambertMaterial({ 
      color: 0xC0C0C0,
      side: THREE.DoubleSide
    });
    const doorMesh = new THREE.Mesh(doorGeometry, doorMaterial);
    doorMesh.position.set(0, randomFloor * 3, 0.76);
    
    // 状态指示灯
    const indicatorGeometry = new THREE.SphereGeometry(0.15, 8, 8);
    const indicatorMaterial = new THREE.MeshLambertMaterial({ 
      color: getElevatorColor(elevator),
      emissive: getElevatorColor(elevator),
      emissiveIntensity: 0.4
    });
    const indicatorMesh = new THREE.Mesh(indicatorGeometry, indicatorMaterial);
    indicatorMesh.position.set(0, buildingHeight + 1.5, 0);
    
    // 电梯类型标识
    const labelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.8, 8);
    const labelMaterial = new THREE.MeshLambertMaterial({ 
      color: getElevatorTypeColor(elevator.type),
      emissive: getElevatorTypeColor(elevator.type),
      emissiveIntensity: 0.2
    });
    const labelMesh = new THREE.Mesh(labelGeometry, labelMaterial);
    labelMesh.position.set(0, buildingHeight + 3, 0);
    
    // 电梯位置标注牌
    const signBoardGeometry = new THREE.PlaneGeometry(2.5, 1.2);
    const signBoardMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x2F4F4F,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.9
    });
    const signBoardMesh = new THREE.Mesh(signBoardGeometry, signBoardMaterial);
    signBoardMesh.position.set(0, buildingHeight + 5, 0);
    
    // 标注牌边框
    const signBoardEdges = new THREE.EdgesGeometry(signBoardGeometry);
    const signBoardLineMaterial = new THREE.LineBasicMaterial({ 
      color: getElevatorTypeColor(elevator.type),
      linewidth: 2
    });
    const signBoardWireframe = new THREE.LineSegments(signBoardEdges, signBoardLineMaterial);
    signBoardWireframe.position.set(0, buildingHeight + 5, 0);
    
    // 电梯编号标识
    const numberGeometry = new THREE.RingGeometry(0.3, 0.5, 8);
    const numberMaterial = new THREE.MeshLambertMaterial({ 
      color: getElevatorColor(elevator),
      side: THREE.DoubleSide,
      emissive: getElevatorColor(elevator),
      emissiveIntensity: 0.3
    });
    const numberMesh = new THREE.Mesh(numberGeometry, numberMaterial);
    numberMesh.position.set(0, buildingHeight + 6.5, 0);
    
    // 电梯运行轨道指示灯（每层一个小灯）
    elevator.floors.forEach((floor, index) => {
      const trackLightGeometry = new THREE.SphereGeometry(0.08, 6, 6);
      const isCurrentFloor = floor === randomFloor;
      const trackLightMaterial = new THREE.MeshLambertMaterial({ 
        color: isCurrentFloor ? 0xFFFF00 : 0x666666,
        emissive: isCurrentFloor ? 0x444400 : 0x000000,
        emissiveIntensity: isCurrentFloor ? 0.5 : 0
      });
      const trackLightMesh = new THREE.Mesh(trackLightGeometry, trackLightMaterial);
      trackLightMesh.position.set(0.8, floor * 3, 0);
      elevatorGroup.add(trackLightMesh);
    });
    
    // 电梯控制面板
    const controlPanelGeometry = new THREE.BoxGeometry(0.3, 1.5, 0.1);
    const controlPanelMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x1a1a1a,
      transparent: true,
      opacity: 0.8
    });
    const controlPanelMesh = new THREE.Mesh(controlPanelGeometry, controlPanelMaterial);
    controlPanelMesh.position.set(0.9, 3, 0);
    
    // 控制面板按钮
    for (let i = 0; i < Math.min(elevator.floors.length, 8); i++) {
      const buttonGeometry = new THREE.SphereGeometry(0.05, 6, 6);
      const buttonMaterial = new THREE.MeshLambertMaterial({ 
        color: elevator.floors[i] === randomFloor ? 0x00FF00 : 0x333333,
        emissive: elevator.floors[i] === randomFloor ? 0x002200 : 0x000000
      });
      const buttonMesh = new THREE.Mesh(buttonGeometry, buttonMaterial);
      buttonMesh.position.set(1.0, 3.5 - (i * 0.15), 0);
      elevatorGroup.add(buttonMesh);
    }
    
    // 电梯安全护栏
    const railingGeometry = new THREE.CylinderGeometry(0.05, 0.05, buildingHeight, 8);
    const railingMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
    
    // 四个角的护栏
    const railingPositions = [
      { x: 0.7, z: 0.7 },
      { x: -0.7, z: 0.7 },
      { x: 0.7, z: -0.7 },
      { x: -0.7, z: -0.7 }
    ];
    
    railingPositions.forEach(pos => {
      const railingMesh = new THREE.Mesh(railingGeometry, railingMaterial);
      railingMesh.position.set(pos.x, buildingHeight / 2, pos.z);
      elevatorGroup.add(railingMesh);
    });
    
    // 电梯机房（顶部）
    const machineRoomGeometry = new THREE.BoxGeometry(2, 1.5, 2);
    const machineRoomMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x444444,
      transparent: true,
      opacity: 0.8
    });
    const machineRoomMesh = new THREE.Mesh(machineRoomGeometry, machineRoomMaterial);
    machineRoomMesh.position.y = buildingHeight + 0.75;
    
    elevatorGroup.add(shaftMesh);
    elevatorGroup.add(shaftWireframe);
    elevatorGroup.add(carMesh);
    elevatorGroup.add(doorMesh);
    elevatorGroup.add(indicatorMesh);
    elevatorGroup.add(labelMesh);
    elevatorGroup.add(signBoardMesh);
    elevatorGroup.add(signBoardWireframe);
    elevatorGroup.add(numberMesh);
    elevatorGroup.add(controlPanelMesh);
    elevatorGroup.add(machineRoomMesh);
    
    // 设置电梯位置
    elevatorGroup.position.set(elevator.position.x, elevator.position.y, elevator.position.z);
    
    // 添加用户数据
    elevatorGroup.userData = { elevator, type: 'elevator' };
    
    return elevatorGroup;
  }, [getElevatorColor, getElevatorTypeColor]);

  // 创建楼宇3D模型
  const createBuilding = useCallback((building: BuildingData): THREE.Group => {
    const group = new THREE.Group();
    
    // 楼宇主体
    const buildingHeight = building.floors * 3; // 每层3个单位高度
    const geometry = new THREE.BoxGeometry(8, buildingHeight, 8);
    const material = new THREE.MeshLambertMaterial({ 
      color: getBuildingColor(building),
      transparent: true,
      opacity: 0.8
    });
    const buildingMesh = new THREE.Mesh(geometry, material);
    buildingMesh.position.y = buildingHeight / 2;
    
    // 楼宇边框
    const edges = new THREE.EdgesGeometry(geometry);
    const lineMaterial = new THREE.LineBasicMaterial({ 
      color: 0xffffff, 
      linewidth: 2 
    });
    const wireframe = new THREE.LineSegments(edges, lineMaterial);
    wireframe.position.y = buildingHeight / 2;
    
    // 添加窗户装饰
    const windowMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x87CEEB,
      transparent: true,
      opacity: 0.7
    });
    
    // 窗框材质
    const windowFrameMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x8B4513,
      transparent: true,
      opacity: 0.9
    });
    
    // 在楼宇四面添加窗户
    for (let floor = 1; floor < building.floors; floor += 2) {
      for (let side = 0; side < 4; side++) {
        for (let window = 0; window < 3; window++) {
          // 窗户玻璃
          const windowGeometry = new THREE.BoxGeometry(0.8, 1.2, 0.1);
          const windowMesh = new THREE.Mesh(windowGeometry, windowMaterial);
          
          // 窗框
          const frameGeometry = new THREE.BoxGeometry(1.0, 1.4, 0.15);
          const frameMesh = new THREE.Mesh(frameGeometry, windowFrameMaterial);
          
          const floorY = floor * 3;
          const windowX = (window - 1) * 2;
          
          if (side === 0) { // 前面
            windowMesh.position.set(windowX, floorY, 4.1);
            frameMesh.position.set(windowX, floorY, 4.05);
          } else if (side === 1) { // 右面
            windowMesh.position.set(4.1, floorY, windowX);
            frameMesh.position.set(4.05, floorY, windowX);
          } else if (side === 2) { // 后面
            windowMesh.position.set(windowX, floorY, -4.1);
            frameMesh.position.set(windowX, floorY, -4.05);
          } else { // 左面
            windowMesh.position.set(-4.1, floorY, windowX);
            frameMesh.position.set(-4.05, floorY, windowX);
          }
          
          // 添加窗户反光效果（随机）
          if (Math.random() > 0.7) {
            const reflectionMaterial = new THREE.MeshLambertMaterial({ 
              color: 0xFFFFFF,
              transparent: true,
              opacity: 0.3,
              emissive: 0xFFFFFF,
              emissiveIntensity: 0.1
            });
            const reflectionMesh = new THREE.Mesh(windowGeometry, reflectionMaterial);
            reflectionMesh.position.copy(windowMesh.position);
            reflectionMesh.position.z += side === 0 ? 0.01 : side === 2 ? -0.01 : 0;
            reflectionMesh.position.x += side === 1 ? 0.01 : side === 3 ? -0.01 : 0;
            group.add(reflectionMesh);
          }
          
          group.add(windowMesh);
          group.add(frameMesh);
        }
      }
    }
    
    // 添加阳台装饰（部分楼层）
    if (building.type === 'residential') {
      for (let floor = 3; floor < building.floors; floor += 5) {
        const balconyGeometry = new THREE.BoxGeometry(9, 0.2, 1.5);
        const balconyMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
        const balconyMesh = new THREE.Mesh(balconyGeometry, balconyMaterial);
        balconyMesh.position.set(0, floor * 3, 5);
        group.add(balconyMesh);
      }
    }
    
    // 楼宇顶部标识和天线
    const topGeometry = new THREE.CylinderGeometry(1, 1, 2, 8);
    const topMaterial = new THREE.MeshLambertMaterial({ 
      color: getBuildingTypeColor(building.type) 
    });
    const topMesh = new THREE.Mesh(topGeometry, topMaterial);
    topMesh.position.y = buildingHeight + 1;
    
    // 添加天线
    const antennaGeometry = new THREE.CylinderGeometry(0.1, 0.1, 8, 8);
    const antennaMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
    const antennaMesh = new THREE.Mesh(antennaGeometry, antennaMaterial);
    antennaMesh.position.y = buildingHeight + 6;
    
    // 天线顶部信号灯
    const signalGeometry = new THREE.SphereGeometry(0.3, 8, 8);
    const signalMaterial = new THREE.MeshLambertMaterial({ 
      color: building.status === 'normal' ? 0x00FF00 : 
             building.status === 'medium' ? 0xFFFF00 : 0xFF0000,
      emissive: building.status === 'normal' ? 0x004400 : 
                building.status === 'medium' ? 0x444400 : 0x440000
    });
    const signalMesh = new THREE.Mesh(signalGeometry, signalMaterial);
    signalMesh.position.y = buildingHeight + 10;
    
    // 地基
    const baseGeometry = new THREE.CylinderGeometry(6, 6, 1, 16);
    const baseMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x424242,
      transparent: true,
      opacity: 0.6
    });
    const baseMesh = new THREE.Mesh(baseGeometry, baseMaterial);
    baseMesh.position.y = 0.5;
    
    // 地基装饰环
    const ringGeometry = new THREE.RingGeometry(6, 7, 16);
    const ringMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x666666,
      side: THREE.DoubleSide
    });
    const ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
    ringMesh.rotation.x = -Math.PI / 2;
    ringMesh.position.y = 1;
    
    // 添加楼宇入口装饰
    const entranceGeometry = new THREE.BoxGeometry(3, 4, 1);
    const entranceMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x8B4513,
      transparent: true,
      opacity: 0.8
    });
    const entranceMesh = new THREE.Mesh(entranceGeometry, entranceMaterial);
    entranceMesh.position.set(0, 2, 4.5);
    
    // 入口玻璃门
    const doorGlassGeometry = new THREE.PlaneGeometry(2.5, 3.5);
    const doorGlassMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x87CEEB,
      transparent: true,
      opacity: 0.3
    });
    const doorGlassMesh = new THREE.Mesh(doorGlassGeometry, doorGlassMaterial);
    doorGlassMesh.position.set(0, 2, 5.1);
    
    // 楼宇标识牌
    const signGeometry = new THREE.PlaneGeometry(4, 1);
    const signMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x2F4F4F,
      side: THREE.DoubleSide
    });
    const signMesh = new THREE.Mesh(signGeometry, signMaterial);
    signMesh.position.set(0, 6, 4.5);
    
    // 屋顶装饰
    const roofDecoGeometry = new THREE.ConeGeometry(2, 3, 8);
    const roofDecoMaterial = new THREE.MeshLambertMaterial({ 
      color: getBuildingTypeColor(building.type),
      emissive: getBuildingTypeColor(building.type),
      emissiveIntensity: 0.1
    });
    const roofDecoMesh = new THREE.Mesh(roofDecoGeometry, roofDecoMaterial);
    roofDecoMesh.position.y = buildingHeight + 4;
    
    // 空调外机（商业和办公楼）
    if (building.type === 'commercial' || building.type === 'office') {
      for (let floor = 2; floor < building.floors; floor += 3) {
        for (let side = 0; side < 2; side++) {
          // 创建空调组
          const acGroup = new THREE.Group();
          
          const acGeometry = new THREE.BoxGeometry(0.8, 0.6, 0.4);
          const acMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
          const acMesh = new THREE.Mesh(acGeometry, acMaterial);
          
          if (side === 0) {
            acMesh.position.set(3, floor * 3, 4.5);
          } else {
            acMesh.position.set(-3, floor * 3, 4.5);
          }
          
          // 空调风扇
          const fanGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.1, 8);
          const fanMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
          const fanMesh = new THREE.Mesh(fanGeometry, fanMaterial);
          fanMesh.position.copy(acMesh.position);
          fanMesh.position.z += 0.3;
          fanMesh.rotation.x = Math.PI / 2;
          
          // 将空调和风扇添加到空调组
          acGroup.add(acMesh);
          acGroup.add(fanMesh);
          
          // 为空调组设置userData，标识为HVAC设备
          acGroup.userData = {
            type: 'hvac',
            buildingId: building.id,
            buildingName: building.name,
            floor: floor,
            side: side === 0 ? 'east' : 'west',
            device: {
              id: `HVAC_${building.id}_${floor}_${side}`,
              name: `空调外机 ${building.name} ${floor}层${side === 0 ? '东侧' : '西侧'}`,
              type: 'hvac',
              buildingId: building.id,
              buildingName: building.name,
              status: 'online',
              location: `${floor}层${side === 0 ? '东侧' : '西侧'}外墙`,
              lastMaintenance: '2024-02-01',
              nextMaintenance: '2024-05-01',
              manufacturer: building.type === 'commercial' ? '大金' : '约克',
              model: building.type === 'commercial' ? 'VRV-X7' : 'YVWA',
              installDate: '2020-02-15',
              energyConsumption: 150
            }
          };
          
          group.add(acGroup);
        }
      }
    }
    
    // 楼宇广告牌（商业楼）
    if (building.type === 'commercial') {
      const billboardGeometry = new THREE.PlaneGeometry(6, 2);
      const billboardMaterial = new THREE.MeshLambertMaterial({ 
        color: 0xFF6B35,
        emissive: 0xFF6B35,
        emissiveIntensity: 0.2
      });
      const billboardMesh = new THREE.Mesh(billboardGeometry, billboardMaterial);
      billboardMesh.position.set(0, buildingHeight - 3, 4.2);
      group.add(billboardMesh);
      
      // 广告牌边框
      const billboardEdges = new THREE.EdgesGeometry(billboardGeometry);
      const billboardLineMaterial = new THREE.LineBasicMaterial({ color: 0xFFFFFF });
      const billboardWireframe = new THREE.LineSegments(billboardEdges, billboardLineMaterial);
      billboardWireframe.position.copy(billboardMesh.position);
      group.add(billboardWireframe);
    }
    
    // 楼宇周围绿化
    const plantPositions = [
      { x: 8, z: 8 }, { x: -8, z: 8 }, { x: 8, z: -8 }, { x: -8, z: -8 },
      { x: 10, z: 0 }, { x: -10, z: 0 }, { x: 0, z: 10 }, { x: 0, z: -10 }
    ];
    
    plantPositions.forEach(pos => {
      // 树木
      const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, 3, 8);
      const trunkMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
      const trunkMesh = new THREE.Mesh(trunkGeometry, trunkMaterial);
      trunkMesh.position.set(pos.x, 1.5, pos.z);
      group.add(trunkMesh);
      
      // 树冠
      const crownGeometry = new THREE.SphereGeometry(2, 8, 8);
      const crownMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 });
      const crownMesh = new THREE.Mesh(crownGeometry, crownMaterial);
      crownMesh.position.set(pos.x, 4, pos.z);
      group.add(crownMesh);
      
      // 花坛
      const flowerBedGeometry = new THREE.CylinderGeometry(1.5, 1.5, 0.3, 8);
      const flowerBedMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
      const flowerBedMesh = new THREE.Mesh(flowerBedGeometry, flowerBedMaterial);
      flowerBedMesh.position.set(pos.x, 0.15, pos.z);
      group.add(flowerBedMesh);
    });
    
    // 路灯
    const lampPositions = [
      { x: 12, z: 12 }, { x: -12, z: 12 }, { x: 12, z: -12 }, { x: -12, z: -12 }
    ];
    
    lampPositions.forEach(pos => {
      // 灯杆
      const poleGeometry = new THREE.CylinderGeometry(0.1, 0.15, 8, 8);
      const poleMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 });
      const poleMesh = new THREE.Mesh(poleGeometry, poleMaterial);
      poleMesh.position.set(pos.x, 4, pos.z);
      group.add(poleMesh);
      
      // 灯头
      const lampGeometry = new THREE.SphereGeometry(0.5, 8, 8);
      const lampMaterial = new THREE.MeshLambertMaterial({ 
        color: 0xFFFFAA,
        emissive: 0xFFFFAA,
        emissiveIntensity: 0.3
      });
      const lampMesh = new THREE.Mesh(lampGeometry, lampMaterial);
      lampMesh.position.set(pos.x, 8.5, pos.z);
      group.add(lampMesh);
    });
    
    // 添加电梯
    building.elevators.forEach(elevator => {
      const elevatorGroup = createElevator(elevator, buildingHeight);
      // 为电梯组添加楼宇信息
      elevatorGroup.userData.building = building;
      group.add(elevatorGroup);
    });
    
    // 添加楼层指示灯（每5层一个）
    for (let floor = 5; floor <= building.floors; floor += 5) {
      const floorLightGeometry = new THREE.SphereGeometry(0.2, 8, 8);
      const floorLightMaterial = new THREE.MeshLambertMaterial({ 
        color: building.status === 'normal' ? 0x00FF00 : 
               building.status === 'medium' ? 0xFFFF00 : 0xFF0000,
        emissive: building.status === 'normal' ? 0x002200 : 
                  building.status === 'medium' ? 0x222200 : 0x220000
      });
      const floorLightMesh = new THREE.Mesh(floorLightGeometry, floorLightMaterial);
      floorLightMesh.position.set(4.5, floor * 3, 0);
      group.add(floorLightMesh);
    }
    
    group.add(buildingMesh);
    group.add(wireframe);
    group.add(topMesh);
    group.add(antennaMesh);
    group.add(signalMesh);
    group.add(baseMesh);
    group.add(ringMesh);
    group.add(entranceMesh);
    group.add(doorGlassMesh);
    group.add(signMesh);
    group.add(roofDecoMesh);
    
    // 设置位置
    group.position.set(building.position.x, building.position.y, building.position.z);
    
    // 添加用户数据
    group.userData = { building, originalPosition: { ...building.position } };
    
    return group;
  }, [getBuildingColor, getBuildingTypeColor, createElevator]);

  // 初始化3D场景
  const initScene = useCallback(() => {
    const currentMount = mountRef.current; // 保存当前的mount引用
    if (!currentMount) return;

    // 创建场景
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1a1a2e);
    sceneRef.current = scene;

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      currentMount.clientWidth / currentMount.clientHeight,
      0.1,
      1000
    );
    camera.position.set(0, 80, 100);
    camera.lookAt(0, 0, 0);
    cameraRef.current = camera;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    rendererRef.current = renderer;

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(50, 100, 50);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 1024;
    directionalLight.shadow.mapSize.height = 1024;
    scene.add(directionalLight);

    // 添加地面
    const groundGeometry = new THREE.PlaneGeometry(200, 200);
    const groundMaterial = new THREE.MeshLambertMaterial({ 
      color: 0x2d2d44,
      transparent: true,
      opacity: 0.8
    });
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // 添加多层网格系统
    // 主网格
    const mainGrid = new THREE.GridHelper(200, 20, 0x666666, 0x333333);
    mainGrid.name = 'mainGrid';
    scene.add(mainGrid);
    
    // 细分网格
    const subGrid = new THREE.GridHelper(200, 100, 0x222222, 0x111111);
    subGrid.name = 'subGrid';
    scene.add(subGrid);
    
    // 坐标轴已移除以保持界面简洁

    // 创建楼宇
    buildingsData.forEach(building => {
      const buildingGroup = createBuilding(building);
      buildingGroup.children.forEach(child => {
        if (child instanceof THREE.Mesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      scene.add(buildingGroup);
    });

    // 添加轨道控制器 (OrbitControls)
    const controls = new OrbitControls(camera, renderer.domElement);
    
    // 配置控制器参数
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.05; // 阻尼系数
    controls.screenSpacePanning = false; // 禁用屏幕空间平移
    
    // 设置旋转限制
    controls.minPolarAngle = Math.PI / 6; // 最小极角 (30度)
    controls.maxPolarAngle = Math.PI / 2.2; // 最大极角 (约82度)
    
    // 设置缩放限制
    controls.minDistance = 20; // 最小距离
    controls.maxDistance = 300; // 最大距离
    
    // 设置平移限制
    controls.enablePan = true; // 启用平移
    controls.panSpeed = 0.8; // 平移速度
    
    // 设置旋转速度
    controls.rotateSpeed = 0.5; // 旋转速度
    
    // 设置缩放速度
    controls.zoomSpeed = 1.0; // 缩放速度
    
    // 设置目标点 (相机看向的中心点)
    controls.target.set(0, 20, 0);
    
    // 更新控制器
    controls.update();
    
    // 保存控制器引用
    controlsRef.current = controls;

    // 点击检测
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    const onMouseClick = (event: MouseEvent) => {
      const rect = currentMount.getBoundingClientRect();
      mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
      mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(scene.children, true);

      if (intersects.length > 0) {
        const intersectedObject = intersects[0].object;
        let parent = intersectedObject.parent;
        
        // 优先检查是否点击了电梯（从最近的父级开始）
        let elevatorParent = parent;
        while (elevatorParent && !elevatorParent.userData.elevator) {
          elevatorParent = elevatorParent.parent;
        }
        
        // 检查是否点击了HVAC设备
        let hvacParent = parent;
        while (hvacParent && hvacParent.userData.type !== 'hvac') {
          hvacParent = hvacParent.parent;
        }
        
        // 检查是否点击了楼宇（但排除电梯和HVAC区域）
        let buildingParent = parent;
        while (buildingParent && !buildingParent.userData.building) {
          buildingParent = buildingParent.parent;
        }
        
        // 优先处理电梯点击事件
        if (elevatorParent && elevatorParent.userData.elevator) {
          // 设备点击事件 - 查找对应的设备信息
          const elevator = elevatorParent.userData.elevator;
          console.log('选中电梯:', elevator.id);
          
          // 根据电梯ID查找对应的设备信息
          const deviceInfo = mockDevicesData.find(device => 
            device.name.includes(elevator.id) || 
            device.id.includes(elevator.id.replace(/[^0-9]/g, ''))
          );
          
          if (deviceInfo) {
            setSelectedDevice(deviceInfo);
            setDeviceModalVisible(true);
            console.log('显示设备信息:', deviceInfo);
          } else {
            // 如果没有找到对应设备，创建一个基本的设备信息
            const basicDeviceInfo: DeviceData = {
              id: elevator.id,
              name: `电梯${elevator.id}`,
              type: 'elevator',
              buildingId: elevatorParent.userData.building?.id || 'unknown',
              buildingName: elevatorParent.userData.building?.name || '未知建筑',
              status: elevator.status === 'normal' ? 'online' : 
                     elevator.status === 'maintenance' ? 'maintenance' : 'error',
              location: `${elevator.type === 'passenger' ? '客梯' : 
                        elevator.type === 'freight' ? '货梯' : '消防梯'}`,
              lastMaintenance: '2024-01-15',
              nextMaintenance: '2024-04-15',
              manufacturer: '未知厂商',
              model: '未知型号',
              installDate: '2020-01-01',
              operatingHours: Math.floor(Math.random() * 10000) + 5000
            };
            setSelectedDevice(basicDeviceInfo);
            setDeviceModalVisible(true);
            console.log('显示基本设备信息:', basicDeviceInfo);
          }
        } else if (hvacParent && hvacParent.userData.type === 'hvac') {
          // HVAC设备点击事件
          const hvacDevice = hvacParent.userData.device;
          console.log('选中HVAC设备:', hvacDevice.name);
          setSelectedDevice(hvacDevice);
          setDeviceModalVisible(true);
        } else if (buildingParent && buildingParent.userData.building && !elevatorParent && !hvacParent) {
          // 楼宇点击事件 - 只有在没有点击电梯和HVAC设备的情况下才显示楼宇信息
          const building = buildingParent.userData.building;
          console.log('选中楼宇:', building.name);
          setSelectedBuilding(building);
          setBuildingModalVisible(true);
        }
      } else {
        // 点击空白区域
        console.log('取消选择');
        setDeviceModalVisible(false);
        setSelectedDevice(null);
        setBuildingModalVisible(false);
        setSelectedBuilding(null);
      }
    };

    currentMount.addEventListener('click', onMouseClick);

    currentMount.appendChild(renderer.domElement);

    // 动画循环（支持可见性暂停/恢复）
    const startLoop = () => {
      const animate = () => {
        if (!isActive || document.hidden) {
          animationIdRef.current = undefined;
          return;
        }
        animationIdRef.current = requestAnimationFrame(animate);

        // 更新控制器 (用于阻尼效果)
        if (controls) {
          controls.update();
        }

        // 楼宇轻微摇摆动画
        scene.children.forEach(child => {
          if (child.userData.building) {
            child.rotation.y += 0.001;
          }
        });

        renderer.render(scene, camera);
      };
      animate();
    };
    startLoopRef.current = startLoop;
    startLoop();
    setIsLoading(false);

    // 清理函数
    return () => {
      // 销毁控制器
      if (controls) {
        controls.dispose();
      }
      // 移除点击事件监听器
      currentMount?.removeEventListener('click', onMouseClick);
    };
  }, [buildingsData, createBuilding, isActive]);

  // 处理窗口大小变化
  const handleResize = () => {
    if (!mountRef.current || !cameraRef.current || !rendererRef.current) return;

    const width = mountRef.current.clientWidth;
    const height = mountRef.current.clientHeight;

    cameraRef.current.aspect = width / height;
    cameraRef.current.updateProjectionMatrix();
    rendererRef.current.setSize(width, height);
  };



  useEffect(() => {
    const currentMount = mountRef.current; // 保存当前的mount引用
    
    // 清理之前的场景
    if (animationIdRef.current) {
      cancelAnimationFrame(animationIdRef.current);
      animationIdRef.current = undefined;
    }
    
    // 清理控制器
    if (controlsRef.current) {
      controlsRef.current.dispose();
      controlsRef.current = null;
    }
    
    // 清理渲染器
    if (rendererRef.current && currentMount) {
      try {
        currentMount.removeChild(rendererRef.current.domElement);
      } catch (e) {
        // 忽略DOM元素不存在的错误
      }
      rendererRef.current.dispose();
      rendererRef.current = null;
    }
    
    // 清理场景
    if (sceneRef.current) {
      // 递归清理场景中的所有对象
      const clearScene = (object: THREE.Object3D) => {
        while (object.children.length > 0) {
          const child = object.children[0];
          clearScene(child);
          object.remove(child);

          // 清理几何体、材质及纹理
          if (child instanceof THREE.Mesh) {
            if (child.geometry) {
              child.geometry.dispose();
            }
            const disposeMaterial = (material: THREE.Material) => {
              const mat: any = material as any;
              const textureKeys = [
                'map', 'lightMap', 'aoMap', 'emissiveMap', 'bumpMap', 'normalMap',
                'roughnessMap', 'metalnessMap', 'specularMap', 'envMap', 'alphaMap', 'displacementMap'
              ];
              textureKeys.forEach((key) => {
                const tex = mat[key] as THREE.Texture | undefined;
                if (tex) {
                  try { tex.dispose(); } catch {}
                  mat[key] = null;
                }
              });
              material.dispose();
            };
            if (child.material) {
              if (Array.isArray(child.material)) {
                child.material.forEach(disposeMaterial);
              } else {
                disposeMaterial(child.material);
              }
            }
          }
        }
      };
      clearScene(sceneRef.current);
      sceneRef.current = null;
    }
    
    // 重新初始化场景
    if (currentMount && isActive) {
      initScene();
    }
    
    window.addEventListener('resize', handleResize);

    return () => {
      if (animationIdRef.current) {
        cancelAnimationFrame(animationIdRef.current);
      }
      // 销毁控制器
      if (controlsRef.current) {
        controlsRef.current.dispose();
        controlsRef.current = null;
      }
      window.removeEventListener('resize', handleResize);
      if (currentMount && rendererRef.current) {
        try {
          currentMount.removeChild(rendererRef.current.domElement);
        } catch (e) {
          // 忽略DOM元素不存在的错误
        }
      }
    };
  }, [buildingsData, initScene, isActive]);

  // 监听tab活跃状态变化
  useEffect(() => {
    // 当tab变为活跃时，如果场景还没有初始化，则初始化场景
    if (isActive && mountRef.current && !sceneRef.current) {
      initScene();
    }
    // 当tab变为活跃时，确保渲染一次以更新画面
    if (isActive && rendererRef.current && sceneRef.current && cameraRef.current) {
      // 启动动画循环（如果尚未运行）
      if (!animationIdRef.current && startLoopRef.current) {
        startLoopRef.current();
      } else {
        rendererRef.current.render(sceneRef.current, cameraRef.current);
      }
    }
    // 当tab不活跃时，停止动画循环
    if (!isActive && animationIdRef.current) {
      cancelAnimationFrame(animationIdRef.current);
      animationIdRef.current = undefined;
    }
  }, [isActive, initScene]);

  // 页面可见性变化时控制动画循环
  useEffect(() => {
    const onVisibilityChange = () => {
      if (!document.hidden && isActive && startLoopRef.current && !animationIdRef.current) {
        startLoopRef.current();
      } else if (document.hidden && animationIdRef.current) {
        cancelAnimationFrame(animationIdRef.current);
        animationIdRef.current = undefined;
      }
    };
    document.addEventListener('visibilitychange', onVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', onVisibilityChange);
    };
  }, [isActive]);

  // 网格线已在场景初始化时添加，无需动态更新

  return (
    <div className="dashboard-3d-container">
      {/* 3D场景容器 - 全屏显示 */}
      <div ref={mountRef} className="scene-container-fullscreen" />

      {/* 加载指示器 */}
      {isLoading && (
        <div className="loading-overlay">
          <Spin size="large" />
          <div style={{ marginTop: 16, color: 'white' }}>正在加载3D场景...</div>
        </div>
      )}

      {/* 设备信息弹窗 */}
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <DatabaseOutlined />
            <span>设备详细信息</span>
          </div>
        }
        open={deviceModalVisible}
        onCancel={() => {
          setDeviceModalVisible(false);
          setSelectedDevice(null);
        }}
        footer={null}
        width={800}
        style={{ top: 20 }}
      >
        {selectedDevice && (
          <div>
            <Descriptions
              title={selectedDevice.name}
              bordered
              column={2}
              size="small"
              style={{ marginBottom: 16 }}
            >
              <Descriptions.Item label="设备ID" span={1}>
                {selectedDevice.id}
              </Descriptions.Item>
              <Descriptions.Item label="设备类型" span={1}>
                <Tag color={
                  selectedDevice.type === 'elevator' ? 'blue' :
                  selectedDevice.type === 'hvac' ? 'green' :
                  selectedDevice.type === 'security' ? 'orange' :
                  selectedDevice.type === 'lighting' ? 'yellow' :
                  selectedDevice.type === 'fire_safety' ? 'red' :
                  selectedDevice.type === 'access_control' ? 'purple' : 'default'
                }>
                  {selectedDevice.type === 'elevator' ? '电梯' :
                   selectedDevice.type === 'hvac' ? '空调系统' :
                   selectedDevice.type === 'security' ? '安防系统' :
                   selectedDevice.type === 'lighting' ? '照明系统' :
                   selectedDevice.type === 'fire_safety' ? '消防系统' :
                   selectedDevice.type === 'access_control' ? '门禁系统' : '其他'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="所属建筑" span={1}>
                {selectedDevice.buildingName}
              </Descriptions.Item>
              <Descriptions.Item label="设备状态" span={1}>
                <Tag color={
                  selectedDevice.status === 'online' ? 'green' :
                  selectedDevice.status === 'offline' ? 'red' :
                  selectedDevice.status === 'maintenance' ? 'orange' :
                  selectedDevice.status === 'error' ? 'red' : 'default'
                }>
                  {selectedDevice.status === 'online' ? '在线' :
                   selectedDevice.status === 'offline' ? '离线' :
                   selectedDevice.status === 'maintenance' ? '维护中' :
                   selectedDevice.status === 'error' ? '故障' : '未知'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="安装位置" span={2}>
                {selectedDevice.location}
              </Descriptions.Item>
              <Descriptions.Item label="制造商" span={1}>
                {selectedDevice.manufacturer}
              </Descriptions.Item>
              <Descriptions.Item label="设备型号" span={1}>
                {selectedDevice.model}
              </Descriptions.Item>
              <Descriptions.Item label="安装日期" span={1}>
                {selectedDevice.installDate}
              </Descriptions.Item>
              <Descriptions.Item label="运行时长" span={1}>
                {selectedDevice.operatingHours ? `${selectedDevice.operatingHours} 小时` : '未知'}
              </Descriptions.Item>
              <Descriptions.Item label="上次维护" span={1}>
                {selectedDevice.lastMaintenance}
              </Descriptions.Item>
              <Descriptions.Item label="下次维护" span={1}>
                {selectedDevice.nextMaintenance}
              </Descriptions.Item>
              {selectedDevice.energyConsumption && (
                <Descriptions.Item label="能耗" span={2}>
                  {selectedDevice.energyConsumption} kWh
                </Descriptions.Item>
              )}
            </Descriptions>

            {/* 设备状态指示器 */}
            <Card size="small" title="设备状态监控" style={{ marginTop: 16 }}>
              <Row gutter={16}>
                <Col span={6}>
                  <Statistic
                    title="运行状态"
                    value={selectedDevice.status === 'online' ? '正常' : 
                           selectedDevice.status === 'maintenance' ? '维护' : '异常'}
                    valueStyle={{ 
                      color: selectedDevice.status === 'online' ? '#3f8600' : 
                             selectedDevice.status === 'maintenance' ? '#fa8c16' : '#cf1322' 
                    }}
                    prefix={selectedDevice.status === 'online' ? <CheckCircleOutlined /> : 
                            selectedDevice.status === 'maintenance' ? <ExclamationCircleOutlined /> : 
                            <WarningOutlined />}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title="运行时长"
                    value={selectedDevice.operatingHours || 0}
                    suffix="小时"
                  />
                </Col>
                {selectedDevice.energyConsumption && (
                  <Col span={6}>
                    <Statistic
                      title="当前能耗"
                      value={selectedDevice.energyConsumption}
                      suffix="kWh"
                    />
                  </Col>
                )}
                <Col span={6}>
                  <Statistic
                    title="维护周期"
                    value="90"
                    suffix="天"
                  />
                </Col>
              </Row>
            </Card>
          </div>
        )}
      </Modal>

      {/* 楼宇信息弹窗 */}
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <HomeOutlined />
            <span>楼宇详细信息</span>
          </div>
        }
        open={buildingModalVisible}
        onCancel={() => {
          setBuildingModalVisible(false);
          setSelectedBuilding(null);
        }}
        footer={null}
        width={1000}
        style={{ top: 20 }}
      >
        {selectedBuilding && (
          <div>
            <Descriptions
              title={selectedBuilding.name}
              bordered
              column={2}
              size="small"
              style={{ marginBottom: 16 }}
            >
              <Descriptions.Item label="楼宇ID" span={1}>
                {selectedBuilding.id}
              </Descriptions.Item>
              <Descriptions.Item label="楼宇类型" span={1}>
                <Tag color={
                  selectedBuilding.type === 'residential' ? 'blue' :
                  selectedBuilding.type === 'commercial' ? 'purple' :
                  selectedBuilding.type === 'office' ? 'cyan' :
                  selectedBuilding.type === 'mixed' ? 'orange' : 'default'
                }>
                  {selectedBuilding.type === 'residential' ? '住宅楼' :
                   selectedBuilding.type === 'commercial' ? '商业楼' :
                   selectedBuilding.type === 'office' ? '办公楼' :
                   selectedBuilding.type === 'mixed' ? '综合楼' : '其他'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="楼层数" span={1}>
                {selectedBuilding.floors} 层
              </Descriptions.Item>
              <Descriptions.Item label="楼宇状态" span={1}>
                <Tag color={
                  selectedBuilding.status === 'normal' ? 'green' :
                  selectedBuilding.status === 'medium' ? 'orange' :
                  selectedBuilding.status === 'low' ? 'red' : 'default'
                }>
                  {selectedBuilding.status === 'normal' ? '正常' :
                   selectedBuilding.status === 'medium' ? '中等状态' :
                   selectedBuilding.status === 'low' ? '较少状态' : '未知'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="入住率" span={1}>
                <Progress 
                  percent={selectedBuilding.occupancy} 
                  size="small" 
                  status={selectedBuilding.occupancy >= 90 ? 'success' : 
                          selectedBuilding.occupancy >= 70 ? 'normal' : 'exception'}
                />
              </Descriptions.Item>
              <Descriptions.Item label="电梯数量" span={1}>
                {selectedBuilding.elevators.length} 部
              </Descriptions.Item>
              <Descriptions.Item label="坐标位置" span={2}>
                X: {selectedBuilding.position.x}, Y: {selectedBuilding.position.y}, Z: {selectedBuilding.position.z}
              </Descriptions.Item>
            </Descriptions>

            {/* 楼宇状态统计 */}
            <Card size="small" title="楼宇状态监控" style={{ marginBottom: 16 }}>
              <Row gutter={16}>
                <Col span={6}>
                  <Statistic
                    title="楼宇状态"
                    value={selectedBuilding.status === 'normal' ? '正常运行' : 
                           selectedBuilding.status === 'medium' ? '中等状态' : '较少状态'}
                    valueStyle={{ 
                      color: selectedBuilding.status === 'normal' ? '#3f8600' : 
                             selectedBuilding.status === 'medium' ? '#fa8c16' : '#cf1322' 
                    }}
                    prefix={selectedBuilding.status === 'normal' ? <CheckCircleOutlined /> : 
                            selectedBuilding.status === 'medium' ? <ExclamationCircleOutlined /> : 
                            <WarningOutlined />}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title="楼层总数"
                    value={selectedBuilding.floors}
                    suffix="层"
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title="入住率"
                    value={selectedBuilding.occupancy}
                    suffix="%"
                    valueStyle={{ 
                      color: selectedBuilding.occupancy >= 90 ? '#3f8600' : 
                             selectedBuilding.occupancy >= 70 ? '#fa8c16' : '#cf1322' 
                    }}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title="电梯总数"
                    value={selectedBuilding.elevators.length}
                    suffix="部"
                  />
                </Col>
              </Row>
            </Card>

            {/* 电梯列表 */}
            <Card size="small" title="电梯设备列表" style={{ marginTop: 16 }}>
              <Table
                dataSource={selectedBuilding.elevators.map(elevator => ({
                  ...elevator,
                  key: elevator.id
                }))}
                pagination={false}
                size="small"
                columns={[
                  {
                    title: '电梯编号',
                    dataIndex: 'id',
                    key: 'id',
                    width: 100,
                  },
                  {
                    title: '电梯类型',
                    dataIndex: 'type',
                    key: 'type',
                    width: 120,
                    render: (type: string) => (
                      <Tag color={
                        type === 'passenger' ? 'blue' :
                        type === 'freight' ? 'orange' :
                        type === 'emergency' ? 'red' : 'default'
                      }>
                        {type === 'passenger' ? '客梯' :
                         type === 'freight' ? '货梯' :
                         type === 'emergency' ? '消防梯' : '其他'}
                      </Tag>
                    ),
                  },
                  {
                    title: '运行状态',
                    dataIndex: 'status',
                    key: 'status',
                    width: 120,
                    render: (status: string) => (
                      <Tag color={
                        status === 'normal' ? 'green' :
                        status === 'maintenance' ? 'orange' :
                        status === 'error' ? 'red' : 'default'
                      }>
                        {status === 'normal' ? '正常' :
                         status === 'maintenance' ? '维护中' :
                         status === 'error' ? '故障' : '未知'}
                      </Tag>
                    ),
                  },
                  {
                    title: '服务楼层',
                    dataIndex: 'floors',
                    key: 'floors',
                    render: (floors: number[]) => (
                      <span>
                        {floors.length > 10 ? 
                          `${floors[0]}-${floors[floors.length - 1]}层 (共${floors.length}层)` :
                          `${floors.join(', ')}层`
                        }
                      </span>
                    ),
                  },
                  {
                    title: '位置坐标',
                    key: 'position',
                    render: (_, elevator) => (
                      <span>
                        ({elevator.position.x}, {elevator.position.y}, {elevator.position.z})
                      </span>
                    ),
                  },
                ]}
              />
            </Card>
          </div>
        )}
      </Modal>
    </div>
  );
};

// 设备管理视图组件
const DeviceManagementView: React.FC<{ devicesData: DeviceData[] }> = ({ devicesData }) => {
  // 设备统计
  const totalDevices = devicesData.length;
  const onlineDevices = devicesData.filter(device => device.status === 'online').length;
  const offlineDevices = devicesData.filter(device => device.status === 'offline').length;
  const maintenanceDevices = devicesData.filter(device => device.status === 'maintenance').length;
  const errorDevices = devicesData.filter(device => device.status === 'error').length;

  // 设备类型统计
  const deviceTypeStats = {
    elevator: devicesData.filter(device => device.type === 'elevator').length,
    hvac: devicesData.filter(device => device.type === 'hvac').length,
    security: devicesData.filter(device => device.type === 'security').length,
    lighting: devicesData.filter(device => device.type === 'lighting').length,
    fire_safety: devicesData.filter(device => device.type === 'fire_safety').length,
    access_control: devicesData.filter(device => device.type === 'access_control').length,
  };

  // 获取设备类型中文名称
  const getDeviceTypeName = (type: string) => {
    const typeMap = {
      elevator: '电梯',
      hvac: '空调系统',
      security: '安防监控',
      lighting: '照明系统',
      fire_safety: '消防系统',
      access_control: '门禁系统',
    };
    return typeMap[type as keyof typeof typeMap] || type;
  };

  // 获取设备状态配置
  const getDeviceStatusConfig = (status: string) => {
    const statusMap = {
      online: { icon: <CheckCircleOutlined />, text: '在线', color: '#52c41a' },
      offline: { icon: <ExclamationCircleOutlined />, text: '离线', color: '#ff4d4f' },
      maintenance: { icon: <WarningOutlined />, text: '维护中', color: '#faad14' },
      error: { icon: <ExclamationCircleOutlined />, text: '故障', color: '#ff4d4f' },
    };
    return statusMap[status as keyof typeof statusMap] || { icon: <ExclamationCircleOutlined />, text: status, color: '#666' };
  };

  // 设备表格列定义
  const deviceColumns = [
    {
      title: '设备名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      fixed: 'left' as const,
    },
    {
      title: '设备类型',
      dataIndex: 'type',
      key: 'type',
      width: 120,
      render: (type: string) => getDeviceTypeName(type),
      filters: [
        { text: '电梯', value: 'elevator' },
        { text: '空调系统', value: 'hvac' },
        { text: '安防监控', value: 'security' },
        { text: '照明系统', value: 'lighting' },
        { text: '消防系统', value: 'fire_safety' },
        { text: '门禁系统', value: 'access_control' },
      ],
      onFilter: (value: any, record: DeviceData) => record.type === value,
    },
    {
      title: '所属楼宇',
      dataIndex: 'buildingName',
      key: 'buildingName',
      width: 150,
    },
    {
      title: '设备状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status: string) => {
        const config = getDeviceStatusConfig(status);
        return (
          <Space style={{ color: config.color }}>
            {config.icon}
            {config.text}
          </Space>
        );
      },
      filters: [
        { text: '在线', value: 'online' },
        { text: '离线', value: 'offline' },
        { text: '维护中', value: 'maintenance' },
        { text: '故障', value: 'error' },
      ],
      onFilter: (value: any, record: DeviceData) => record.status === value,
    },
    {
      title: '安装位置',
      dataIndex: 'location',
      key: 'location',
      width: 150,
    },
    {
      title: '制造商',
      dataIndex: 'manufacturer',
      key: 'manufacturer',
      width: 120,
    },
    {
      title: '型号',
      dataIndex: 'model',
      key: 'model',
      width: 150,
    },
    {
      title: '安装日期',
      dataIndex: 'installDate',
      key: 'installDate',
      width: 120,
      sorter: (a: DeviceData, b: DeviceData) => new Date(a.installDate).getTime() - new Date(b.installDate).getTime(),
    },
    {
      title: '上次维护',
      dataIndex: 'lastMaintenance',
      key: 'lastMaintenance',
      width: 120,
      sorter: (a: DeviceData, b: DeviceData) => new Date(a.lastMaintenance).getTime() - new Date(b.lastMaintenance).getTime(),
    },
    {
      title: '下次维护',
      dataIndex: 'nextMaintenance',
      key: 'nextMaintenance',
      width: 120,
      render: (date: string) => {
        const nextDate = new Date(date);
        const today = new Date();
        const diffDays = Math.ceil((nextDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
        const color = diffDays <= 7 ? '#ff4d4f' : diffDays <= 30 ? '#faad14' : '#52c41a';
        return <span style={{ color }}>{date}</span>;
      },
      sorter: (a: DeviceData, b: DeviceData) => new Date(a.nextMaintenance).getTime() - new Date(b.nextMaintenance).getTime(),
    },
    {
      title: '能耗 (kWh)',
      dataIndex: 'energyConsumption',
      key: 'energyConsumption',
      width: 120,
      render: (value: number) => value ? value.toLocaleString() : '-',
      sorter: (a: DeviceData, b: DeviceData) => (a.energyConsumption || 0) - (b.energyConsumption || 0),
    },
    {
      title: '运行时长 (h)',
      dataIndex: 'operatingHours',
      key: 'operatingHours',
      width: 130,
      render: (value: number) => value ? value.toLocaleString() : '-',
      sorter: (a: DeviceData, b: DeviceData) => (a.operatingHours || 0) - (b.operatingHours || 0),
    },
  ];

  return (
    <div style={{ marginTop: 24 }}>
      {/* 设备统计概览 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="设备总数"
              value={totalDevices}
              prefix={<DatabaseOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在线设备"
              value={onlineDevices}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
              suffix={`/ ${totalDevices}`}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="维护中"
              value={maintenanceDevices}
              prefix={<WarningOutlined />}
              valueStyle={{ color: '#faad14' }}
              suffix={`/ ${totalDevices}`}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="故障设备"
              value={errorDevices + offlineDevices}
              prefix={<ExclamationCircleOutlined />}
              valueStyle={{ color: '#ff4d4f' }}
              suffix={`/ ${totalDevices}`}
            />
          </Card>
        </Col>
      </Row>

      {/* 设备类型分布 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={24}>
          <Card title="设备类型分布" extra={<DatabaseOutlined />}>
            <Row gutter={16}>
              <Col span={4}>
                <Statistic title="电梯" value={deviceTypeStats.elevator} suffix="台" />
              </Col>
              <Col span={4}>
                <Statistic title="空调系统" value={deviceTypeStats.hvac} suffix="套" />
              </Col>
              <Col span={4}>
                <Statistic title="安防监控" value={deviceTypeStats.security} suffix="套" />
              </Col>
              <Col span={4}>
                <Statistic title="照明系统" value={deviceTypeStats.lighting} suffix="套" />
              </Col>
              <Col span={4}>
                <Statistic title="消防系统" value={deviceTypeStats.fire_safety} suffix="套" />
              </Col>
              <Col span={4}>
                <Statistic title="门禁系统" value={deviceTypeStats.access_control} suffix="套" />
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>

      {/* 设备详细信息表格 */}
      <Card title="设备详细信息" extra={<DatabaseOutlined />}>
        <Table
          columns={deviceColumns}
          dataSource={devicesData}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          }}
          scroll={{ x: 1600 }}
        />
      </Card>
    </div>
  );
};

// 数据管理视图组件
const DataManagementView: React.FC<{ buildingsData: BuildingData[] }> = ({ buildingsData }) => {
  // 计算统计数据
  const totalBuildings = buildingsData.length;
  const normalBuildings = buildingsData.filter(b => b.status === 'normal').length;
  const mediumBuildings = buildingsData.filter(b => b.status === 'medium').length;
  const lowBuildings = buildingsData.filter(b => b.status === 'low').length;
  const avgOccupancy = Math.round(buildingsData.reduce((sum, b) => sum + b.occupancy, 0) / totalBuildings);
  
  // 楼宇类型统计
  const typeStats = {
    residential: buildingsData.filter(b => b.type === 'residential').length,
    commercial: buildingsData.filter(b => b.type === 'commercial').length,
    office: buildingsData.filter(b => b.type === 'office').length,
    mixed: buildingsData.filter(b => b.type === 'mixed').length,
  };

  // 表格列定义
  const columns = [
    {
      title: '楼宇名称',
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: BuildingData) => (
        <Space>
          <HomeOutlined />
          {text}
        </Space>
      ),
    },
    {
      title: '楼层数',
      dataIndex: 'floors',
      key: 'floors',
      sorter: (a: BuildingData, b: BuildingData) => a.floors - b.floors,
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => {
        const typeMap = {
          residential: '住宅',
          commercial: '商业',
          office: '办公',
          mixed: '综合'
        };
        return typeMap[type as keyof typeof typeMap] || type;
      },
      filters: [
        { text: '住宅', value: 'residential' },
        { text: '商业', value: 'commercial' },
        { text: '办公', value: 'office' },
        { text: '综合', value: 'mixed' },
      ],
      onFilter: (value: any, record: BuildingData) => record.type === value,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusConfig = {
          normal: { icon: <CheckCircleOutlined />, text: '正常', color: '#52c41a' },
          medium: { icon: <WarningOutlined />, text: '中等', color: '#faad14' },
          low: { icon: <ExclamationCircleOutlined />, text: '较少', color: '#ff4d4f' },
        };
        const config = statusConfig[status as keyof typeof statusConfig];
        return (
          <Space style={{ color: config.color }}>
            {config.icon}
            {config.text}
          </Space>
        );
      },
      filters: [
        { text: '正常', value: 'normal' },
        { text: '中等', value: 'medium' },
        { text: '较少', value: 'low' },
      ],
      onFilter: (value: any, record: BuildingData) => record.status === value,
    },
    {
      title: '入住率',
      dataIndex: 'occupancy',
      key: 'occupancy',
      render: (occupancy: number) => (
        <Progress 
          percent={occupancy} 
          size="small" 
          status={occupancy < 70 ? 'exception' : occupancy < 85 ? 'active' : 'success'}
        />
      ),
      sorter: (a: BuildingData, b: BuildingData) => a.occupancy - b.occupancy,
    },
    {
      title: '位置',
      key: 'position',
      render: (record: BuildingData) => (
        `(${record.position.x}, ${record.position.z})`
      ),
    },
  ];

  return (
    <div className="data-management-container">
      {/* 统计概览 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总楼宇数"
              value={totalBuildings}
              prefix={<HomeOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="正常运行"
              value={normalBuildings}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
              suffix={`/ ${totalBuildings}`}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="中等状态"
              value={mediumBuildings}
              prefix={<WarningOutlined />}
              valueStyle={{ color: '#faad14' }}
              suffix={`/ ${totalBuildings}`}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="较少状态"
              value={lowBuildings}
              prefix={<ExclamationCircleOutlined />}
              valueStyle={{ color: '#ff4d4f' }}
              suffix={`/ ${totalBuildings}`}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title="楼宇类型分布" extra={<DatabaseOutlined />}>
            <Row gutter={16}>
              <Col span={12}>
                <Statistic title="住宅楼" value={typeStats.residential} suffix="栋" />
              </Col>
              <Col span={12}>
                <Statistic title="商业楼" value={typeStats.commercial} suffix="栋" />
              </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: 16 }}>
              <Col span={12}>
                <Statistic title="办公楼" value={typeStats.office} suffix="栋" />
              </Col>
              <Col span={12}>
                <Statistic title="综合楼" value={typeStats.mixed} suffix="栋" />
              </Col>
            </Row>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="入住率概览">
            <Statistic
              title="平均入住率"
              value={avgOccupancy}
              suffix="%"
              valueStyle={{ 
                color: avgOccupancy < 70 ? '#ff4d4f' : avgOccupancy < 85 ? '#faad14' : '#52c41a' 
              }}
            />
            <Progress 
              percent={avgOccupancy} 
              strokeColor={{
                '0%': '#108ee9',
                '100%': '#87d068',
              }}
              style={{ marginTop: 16 }}
            />
          </Card>
        </Col>
      </Row>

      {/* 楼宇详细信息表格 */}
      <Card title="楼宇详细信息" extra={<DatabaseOutlined />}>
        <Table
          columns={columns}
          dataSource={buildingsData}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          }}
          scroll={{ x: 800 }}
        />
      </Card>

      {/* 设备信息模块 */}
      <DeviceManagementView devicesData={[...mockDevicesData, ...mockDevicesDataPhase2]} />
    </div>
  );
};

const Dashboard3DPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('3d-view');

  return (
    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Tabs 
        activeKey={activeTab} 
        onChange={setActiveTab}
        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
        tabBarStyle={{ 
          margin: 0, 
          padding: '0 16px',
          backgroundColor: '#001529',
          borderBottom: '1px solid #303030'
        }}
        items={[
          {
            key: '3d-view',
            label: (
              <span style={{ color: activeTab === '3d-view' ? '#1890ff' : '#8c8c8c' }}>
                <EyeOutlined />
                华发一期 3D视图
              </span>
            ),
            children: (
              <div style={{ height: 'calc(100vh - 46px)', overflow: 'hidden' }}>
                <Phase1View />
              </div>
            ),
            style: { height: '100%', overflow: 'hidden' }
          },
          {
            key: '3d-view-phase2',
            label: (
              <span style={{ color: activeTab === '3d-view-phase2' ? '#1890ff' : '#8c8c8c' }}>
                <EyeOutlined />
                华发二期 3D视图
              </span>
            ),
            children: (
              <div style={{ height: 'calc(100vh - 46px)', overflow: 'hidden' }}>
                <Phase2View />
              </div>
            ),
            style: { height: '100%', overflow: 'hidden' }
          },
          {
            key: 'data-management',
            label: (
              <span style={{ color: activeTab === 'data-management' ? '#1890ff' : '#8c8c8c' }}>
                <DatabaseOutlined />
                数据管理
              </span>
            ),
            children: (
              <div style={{ height: 'calc(100vh - 46px)', overflow: 'auto', padding: '16px' }}>
                <DataManagementView buildingsData={[...mockBuildingsData, ...mockBuildingsDataPhase2]} />
              </div>
            ),
            style: { height: '100%', overflow: 'auto' }
          }
        ]}
      />
    </div>
  );
};

export default Dashboard3DPage;